document.addEventListener('DOMContentLoaded', () => {
    // 获取DOM元素
    const canvas = document.getElementById('game-canvas');
    const ctx = canvas.getContext('2d');
    const startButton = document.getElementById('start-btn');
    const scoreElement = document.getElementById('score');
    
    // 游戏配置
    const gridSize = 20; // 网格大小
    const tileCount = canvas.width / gridSize; // 网格数量
    
    // 游戏状态
    let gameRunning = false;
    let gameOver = false;
    let score = 0;
    let speed = 7; // 每秒移动的格子数
    
    // 蛇的初始位置和大小
    let snake = [
        {x: 10, y: 10}, // 头部
        {x: 9, y: 10},
        {x: 8, y: 10}
    ];
    
    // 移动方向
    let dx = 1; // 水平方向移动
    let dy = 0; // 垂直方向移动
    
    // 食物位置
    let food = {
        x: 15,
        y: 15
    };
    
    // 上一次更新时间
    let lastUpdateTime = 0;
    
    // 随机生成食物位置
    function generateFood() {
        food.x = Math.floor(Math.random() * tileCount);
        food.y = Math.floor(Math.random() * tileCount);
        
        // 确保食物不会生成在蛇身上
        for (let segment of snake) {
            if (segment.x === food.x && segment.y === food.y) {
                generateFood(); // 如果生成在蛇身上，重新生成
                break;
            }
        }
    }
    
    // 绘制游戏元素
    function draw(currentTime) {
        // 计算时间差
        const deltaTime = (currentTime - lastUpdateTime) / 1000; // 转换为秒
        
        // 清空画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // 如果游戏正在运行，更新游戏状态
        if (gameRunning && !gameOver) {
            // 根据速度和时间差决定是否更新蛇的位置
            if (deltaTime > 1 / speed) {
                updateSnake();
                lastUpdateTime = currentTime;
            }
        }
        
        // 绘制蛇
        ctx.fillStyle = '#2ecc71';
        for (let i = 0; i < snake.length; i++) {
            const segment = snake[i];
            
            // 蛇头用不同颜色
            if (i === 0) {
                ctx.fillStyle = '#27ae60';
            } else {
                ctx.fillStyle = '#2ecc71';
            }
            
            ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize - 1, gridSize - 1);
        }
        
        // 绘制食物
        ctx.fillStyle = '#e74c3c';
        ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize - 1, gridSize - 1);
        
        // 如果游戏结束，显示游戏结束信息
        if (gameOver) {
            ctx.fillStyle = 'rgba(0, 0, 0, 0.75)';
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            ctx.font = '30px Arial';
            ctx.fillStyle = 'white';
            ctx.textAlign = 'center';
            ctx.fillText('游戏结束!', canvas.width / 2, canvas.height / 2 - 15);
            
            ctx.font = '20px Arial';
            ctx.fillText(`最终得分: ${score}`, canvas.width / 2, canvas.height / 2 + 20);
            ctx.fillText('点击"开始游戏"重新开始', canvas.width / 2, canvas.height / 2 + 50);
        }
        
        // 继续动画循环
        requestAnimationFrame(draw);
    }
    
    // 更新蛇的位置
    function updateSnake() {
        // 如果游戏结束，不更新
        if (gameOver) return;
        
        // 计算新的头部位置
        const head = {
            x: snake[0].x + dx,
            y: snake[0].y + dy
        };
        
        // 检查是否撞墙
        if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
            gameOver = true;
            return;
        }
        
        // 检查是否撞到自己
        for (let i = 1; i < snake.length; i++) {
            if (head.x === snake[i].x && head.y === snake[i].y) {
                gameOver = true;
                return;
            }
        }
        
        // 将新头部添加到蛇身前面
        snake.unshift(head);
        
        // 检查是否吃到食物
        if (head.x === food.x && head.y === food.y) {
            // 增加分数
            score += 10;
            scoreElement.textContent = score;
            
            // 每得100分增加速度
            if (score % 100 === 0) {
                speed += 1;
            }
            
            // 生成新的食物
            generateFood();
        } else {
            // 如果没有吃到食物，移除尾部
            snake.pop();
        }
    }
    
    // 改变方向
    function changeDirection(event) {
        // 防止反向移动
        if (event.key === 'ArrowUp' || event.key === 'w' || event.key === 'W') {
            if (dy !== 1) { // 不允许向下移动时向上转向
                dx = 0;
                dy = -1;
            }
        } else if (event.key === 'ArrowDown' || event.key === 's' || event.key === 'S') {
            if (dy !== -1) { // 不允许向上移动时向下转向
                dx = 0;
                dy = 1;
            }
        } else if (event.key === 'ArrowLeft' || event.key === 'a' || event.key === 'A') {
            if (dx !== 1) { // 不允许向右移动时向左转向
                dx = -1;
                dy = 0;
            }
        } else if (event.key === 'ArrowRight' || event.key === 'd' || event.key === 'D') {
            if (dx !== -1) { // 不允许向左移动时向右转向
                dx = 1;
                dy = 0;
            }
        }
    }
    
    // 开始游戏
    function startGame() {
        // 重置游戏状态
        gameRunning = true;
        gameOver = false;
        score = 0;
        speed = 7;
        scoreElement.textContent = score;
        
        // 重置蛇的位置和大小
        snake = [
            {x: 10, y: 10}, // 头部
            {x: 9, y: 10},
            {x: 8, y: 10}
        ];
        
        // 重置移动方向
        dx = 1;
        dy = 0;
        
        // 生成新的食物
        generateFood();
        
        // 更改按钮文本
        startButton.textContent = '重新开始';
    }
    
    // 事件监听
    startButton.addEventListener('click', startGame);
    document.addEventListener('keydown', changeDirection);
    
    // 开始动画循环
    requestAnimationFrame(draw);
});